﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>订单</title>

<link rel="stylesheet" type="text/css"
	href="../admin/layui/css/layui.css" />
<script src="../admin/layui/layui.js" type="text/javascript"
	charset="utf-8"></script>
</head>
<body>
	<form class="layui-form" action="">

		<div class="layui-form-item">

			<div class="layui-inline">

				<label class="layui-form-label">创建时间</label>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="minDate" id="test1">



				</div>

				<div class="layui-form-mid">-</div>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="maxDate" id="test2">

				</div>

			</div>
			<div class="layui-inline">

				<label class="layui-form-label">成交时间</label>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="minTime" id="test3">



				</div>

				<div class="layui-form-mid">-</div>

				<div class="layui-input-inline" style="width: 100px;">

					<input type="text" class="layui-input" name="maxTime" id="test4">

				</div>

			</div>
			<div class="layui-inline">

				<label class="layui-form-label">订单状态</label>

				<div class="layui-input-block">

					<select name="ordState" class="proType">

						<option value="">---请选择---</option>

						<option value="待评价">待评价</option>
						<option value="待发货">待发货</option>
						<option value="待付款">待付款</option>
						<option value="待收货">待收货</option>
					</select>

				</div>

			</div>
			<div class="layui-inline">

				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

				<button type="reset" class="layui-btn layui-btn-primary">重置</button>

			</div>

		</div>

	</form>



	<!-- 修改表单 -->

	<div id="updateDiv" style="display: none;">

		<form class="layui-form" lay-filter="updateForm">

			<div class="layui-form-item" style="display: none;">

				<label class="layui-form-label">订单id</label>

				<div class="layui-input-inline">

					<input type="text" name="ordId" placeholder="请输入"
						autocomplete="off" disabled="disabled" class="layui-input">

				</div>

			</div>

			<!-- <div class="layui-form-item">

				<label class="layui-form-label">订单状态</label>

				<div class="layui-input-inline">

					<input type="radio" name="ordState" value="待收货" title="发货">

				</div>

			</div> -->

			<div class="layui-form-item">

				<div class="layui-input-block">

					<button class="layui-btn" lay-submit lay-filter="uptBtn">立即提交</button>

					<button type="reset" class="layui-btn layui-btn-primary">重置</button>

				</div>

			</div>

		</form>

	</div>



	<!-- 查看详情 -->

	<div id="chaDiv" style="display: none;">

		<table id="demo2" lay-filter="test1"></table>

	</div>
	<script type="text/html" id="toolbarDemo2">
  	<div class="layui-btn-container">
    	<button class="layui-btn layui-btn-xs" lay-event="cha">查看详情</button>
        {{#  if(d.ordState == "待发货"){ }}
          <button class="layui-btn layui-btn-xs layui-bg-orange" lay-event="updordState" id="upds">发货</button>
        {{#  }}}
  	</div>

</script>



	<table id="demo" lay-filter="test"></table>



	<script>
		layui.use([ 'table', 'form', 'laydate' ], function() {

			var table = layui.table;

			var $ = layui.$;

			var form = layui.form;

			var laydate = layui.laydate;

			//第一个实例

			table.render({

				elem : '#demo',

				url : 'getOrder', //数据接口

				page : true, //开启分页

				id : 'idTest',

				cols : [ [ //表头

				{
					field : 'ordId',
					title : 'Id',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {
					field : 'ordId',
					title : '订单id',
					width : 100
				}, {
					field : 'userId',
					title : '买家id',
					width : 100
				}, {
					field : 'ordPrice',
					title : '总金额',
					width : 100
				}, {
					field : 'ordState',
					title : '订单状态',
					width : 100
				}, {
					field : 'ordTime',
					title : '创建时间',
					width : 110
				}, {
					field : 'ftime',
					title : '发货时间',
					width : 110
				}, {
					field : 'gettel',
					title : '收货人电话',
					width : 100
				}, {
					field : 'getname',
					title : '收货人名字',
					width : 100
				}, {
					field : 'paymentTime',
					title : '付款时间',
					width : 100
				}, {
					field : 'dealTime',
					title : '成交时间',
					width : 110
				}, {

					title : '操作',

					width : 150,

					toolbar : '#toolbarDemo2',

				} ] ]

			});//表格渲染结束

			//监听提交

			form.on('submit(formDemo)', function(data) {

				table.reload('idTest', {

					where : data.field

				});

				return false;

			});

			//监听事件

			table.on('tool(test)', function(obj) {

				var data = obj.data;

				console.log(data);

				switch (obj.event) {

				case 'update':

					form.val('updateForm', data);

					layer.open({

						type : 1,

						area : [ '400px', '200px' ],

						content : $('#updateDiv')

					//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

					});

					break;

				case 'cha':

					layer.open({

						type : 1,

						shadeClose : true,

						area : [ '700px', '400px' ],

						content : $('#chaDiv')

					//其他网页的地址

					});
					/* 表格渲染 */

					table.render({

						elem : '#demo2',

						url : 'getOrderDetail?ordId=' + data.ordId, //数据接口

						toolbar : '#toolbarDemo3',

						method : "post", //请求方式

						page : true, //开启分页

						id : "test1",

						cols : [ [ //表头

						{

							field : 'orderId',

							title : 'ID',

							width : 80,

							sort : true

						}, {

							field : 'proId',

							title : '商品Id',

							width : 80
						}, {

							field : 'ordId',

							title : '订单Id',

							width : 80

						}, {

							field : 'proName',

							title : '商品名',

							width : 100

						}, {

							field : 'proPrice',

							title : '商品价格',

							width : 100

						}, {

							field : 'proNum',

							title : '商品数量',

							width : 90

						}, {

							field : 'proUrl',

							title : '商品图片',

							width : 120,
							templet : function(d) {
								return '<img src="showPic/'+d.proUrl+'"/>'
							}

						}, {
							field : 'material',

							title : '材质',

							width : 100
						}, {

							field : 'brand',

							title : '品牌',
							width : 100
						} ] ]

					});

					break;
				case 'updordState':
					layer.confirm('真的修改订单状态为待收货吗？', function(index) {
						//向服务端发送删除指令
						$.post("uptOrd", {
							"ordId" : data.ordId
						}, function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭所有窗口
									table.reload('idTest', {});//表格重载（根据表格id执行）
								})
							}
						}, "json")
					});
				};
			});

			//监听修改提交事件

			form.on('submit(uptBtn)', function(data) {

				$.post('uptOrd', data.field, function(res) {

					if (res.code == 0) {

						layer.msg(res.msg, {

							icon : 1,

							time : 1000

						}, function() {

							table.reload('idTest', {});

							layer.closeAll();

						});

					}

				}, 'json')

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

			});

			//时间选择器

			laydate.render({

				elem : '#test1'

			});

			//时间选择器

			laydate.render({

				elem : '#test2'

			});
			//时间选择器

			laydate.render({

				elem : '#test3'

			});

			//时间选择器

			laydate.render({

				elem : '#test4'

			});

		});
	</script>



</body>

</html>